<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="../vue.js"></script>
</head>

<body>
    <!-- 在按钮上设置更新值，当点击按钮的时候，更改data中的数据 -->
        <!-- 当值是可读可写属性，可以使用get,set 方法进行更新 -->
    <div id="app">


        <p>{{firstname}}--{{lastname}}</p>
        <p>fullname:--{{fullname}}</p>

        <!-- <p>{{fullname()}}</p> -->
        <button @click="fullname='xiao li'">修改姓名</button>

    </div>
    <script>
        Vue.config.productionTip = false;

        const vm = new Vue({
            el: "#app",
            data() {
                return {
                    firstname: 'li',
                    lastname: 'yy'

                };
            },

            // 使用computed 可以缓存数据，也就是调用一次，可以多次被重复使用
            //  computed 属性只可读取不可写入
            // get 是获取数据，set是更新数据
            computed: {
                fullname: {
                    get(){
                        return (this.firstname + ' ' + this.lastname)
                    },
                    set(val){
                        const [firstname,lastname] = val.split(' ');
                        this.firstname = firstname;
                        this.lastname = lastname
                    }
                }
            }

        });
    </script>
</body>

</html>